<{include file="../include/header.html"}>

<div class="layui-fluid">
	<div class="layui-card">
		<div class="layui-card-header">友链列表</div>
		<div class="layui-card-body">
			<table lay-filter="list">
				<thead>
					<tr>
						<th lay-data="{type: 'checkbox', fixed: 'left'}"></th>
						<th lay-data="{field:'id', width:80}">ID</th>
						<th lay-data="{field:'name', width:200}">网站名称</th>
						<th lay-data="{field:'url', width:400}">网站URL</th>
						<th lay-data="{fixed: 'right', toolbar: '#rightBar', width:150}">操作</th>
					</tr> 
				</thead>
				<tbody>
					<{foreach from = $friendshiplinks item = $link}>
					<tr>
						<td></td>
						<td><{$link.id}></td>
						<td><{$link.name}></td>
						<td><{$link.url}></td>
					</tr>
					<{/foreach}>
				</tbody>
			</table>
			<script type="text/html" id="rightBar">
				<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
				<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete"><i class="layui-icon layui-icon-delete"></i>删除</a>
			</script>
			<script type="text/html" id="topBar">
				<button class="layui-btn layui-btn-sm" lay-event="create">新增</button>
				<button class="layui-btn layui-btn-sm" lay-event="delete">批量删除</button>
			</script>
			<script type="text/html" id="edit">
				<form class="layui-form" style="padding:15px">
					<div class="layui-form-item">
						<label class="layui-form-label">网站名称</label>
						<div class="layui-input-block">
							<input type="text" name="name" value="{{d.name}}" placeholder="请输入网站名称，不能超过 100 字符" maxlength="100" required lay-verify="required" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">网站URL</label>
						<div class="layui-input-block">
							<textarea name="url" placeholder="请输入网站完整URL" required lay-verify="required" class="layui-textarea">{{d.url}}</textarea>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-input-block">
							<button class="layui-btn" lay-submit lay-filter="edit">立即提交</button>
						</div>
					</div>
				</form>
			</script>

		</div>
	</div>
</div>

<script>
layui.use(['form', 'table','laytpl'], function(){
	var $ = layui.$
	,form = layui.form
	,table = layui.table
	,laytpl = layui.laytpl;
	
	table.init('list', {
		toolbar: '#topBar',
	});
	
	table.on('toolbar(list)', function(obj){
		var checkStatus = table.checkStatus(obj.config.id);
		var data = checkStatus.data;
		switch(obj.event){
			case 'create':
				var getTpl = $('#edit').html();
				laytpl(getTpl).render({}, function(html) {
					var index = layer.open({
						type: 1,
						area: ['400px'],
						content: html
					});
					
					form.on('submit(edit)',function(form) {
						$.post('<{url('operation','friendshiplink_edit_or_create_ajax','create')}>',form.field,function(data) {
							if(data.status) {
								layer.msg(data.msg,{icon:6});
								location.reload();
							} else {
								layer.alert(data.msg,{icon:5});
							}
						});
						return false;
					});
				});
			break;
			case 'delete':
				if(data.length == 0) {
					layer.msg('请选择友链');
					break;
				}
				layer.alert('确定要删除吗？请谨慎操作',{
					icon: 0,
					title: '你正在删除 '+data.length+' 个友链',
					yes: function(index) {
						$.each(data,function(index,value) {
							$.get("<{url('operation','delete_friendshiplink_ajax','"+value.id+"')}>",function(data) {
								if(data.status) {
									layer.msg('删除成功：'+value.id,{icon:6});
									location.reload();;
								} else {
									layer.open({
										type:1,
										content: '<div style="padding:20px">删除失败（'+value.id+'）：' + data.msg + '</div>',
										icon:5,
										area: ['300px'],
										shade: false,
										offset: [
											Math.random()*($(window).height()-300)
											,Math.random()*($(window).width()-390)
										],
										zIndex: layer.zIndex,
										btn: ['关闭', '全部关闭']
										,yes: function(index){
											layer.close(index);
										}
										,btn2: function(){
											layer.closeAll();
										}
										,success: function(layero, index){
											layer.setTop(layero);
										}
									});
								}
							});
						});
					}
				});
			break;
		}
	});
	
	table.on('tool(list)', function(obj) {
		var data = obj.data;
		var event = obj.event;
		var tr = obj.tr;
		
		if(event == 'delete') {
			layer.alert('确定要删除吗？请谨慎操作',{
					icon: 0,
					yes: function() {
						$.get("<{url('operation','delete_friendshiplink_ajax','"+data.id+"')}>",function(data) {
							if(data.status) {
								layer.msg('删除成功：'+data.id,{icon:6});
								location.reload();
							} else {
								layer.msg(data.msg,{icon:6});
							}
						});
					}
				}
			);
		} else if(event == 'edit') {
			var getTpl = $('#edit').html();
			laytpl(getTpl).render(data, function(html) {
				var index = layer.open({
					type: 1,
					area: ['400px'],
					content: html
				});
				
				form.on('submit(edit)',function(form) {
					$.post('<{url('operation','friendshiplink_edit_or_create_ajax','edit')}>',Object.assign({id:data.id},form.field),function(data) {
						if(data.status) {
							layer.msg(data.msg,{icon:6});
							location.reload();
						} else {
							layer.alert(data.msg,{icon:5});
						}
					});
					return false;
				});
			});
		}
	});
});
</script>

<{include file="../include/footer.html"}>